<template>
  <edu-dialog
    :title.sync="dialog.title"
    :visible.sync="dialog.showDialog"
    @close="close"
    :showFooter="false"
    width="70%"
  >
    <el-row>
      <el-col :span="7">
        <el-radio-group
          v-model="tabPosition"
          @input="radioChange"
          size="small"
          style="margin-bottom: 15px"
        >
          <el-radio-button label="100000002">App菜单</el-radio-button>
          <el-radio-button label="100000001">Pc菜单</el-radio-button>
        </el-radio-group>

        <div style="max-height: 550px; min-height: 250px; overflow: auto">
          <el-tree
            v-loading="loading"
            :data="menuList"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="16" :offset="1">
        <edu-table
          ref="unionTable"
          :data="tableList"
          :pageSize="queryParams.pageSize"
          :pageNum="queryParams.pageNum"
          :total="queryParams.total"
          @page-change="handleCurrentChange"
          :order="true"
          :selection="true"
          :pagination="false"
        >
          <!-- <el-table-column label="roleId" prop="roleId" /> -->
          <el-table-column label="角色名" prop="roleName" />
        </edu-table>
      </el-col>
    </el-row>
  </edu-dialog>
</template>

<script>
import { queryPageTreeByAccount, queryBindRoleListByPage } from "@/api/users";
import utils from "@/utils";

export default {
  data() {
    return {
      loading: false,
      tabPosition: "100000001", //默认菜单组
      defaultProps: {
        children: "subPageList",
        label: "pageName",
      },
      menuList: [],
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      selectRole: {},
      dialog: {
        title: "查看权限",
        showDialog: false,
      },
    };
  },
  methods: {
    open(data) {
      this.accountId = data.accountId;
      this.dialog.showDialog = true;
      this.tableList = [];
      this.queryPageTreeByAccount();
    },
    close() {
      this.dialog.fileList = [];

      this.dialog.showDialog = false;
    },
    // 查询左侧树
    async queryPageTreeByAccount() {
      this.loading = true;
      let { returnObj } = await queryPageTreeByAccount({
        accountId: this.accountId,
        systemId: this.tabPosition,
      });
      this.menuList = returnObj;
      this.loading = false;
    },
    // 菜单组切换
    radioChange() {
      this.queryPageTreeByAccount();
    },
    handleNodeClick(node) {
      this.selectRole = node;
      this.query();
    },
    // 查询右侧表
    async query() {
      let { returnObj } = await queryBindRoleListByPage({
        accountId: this.accountId,
        pageId: this.selectRole.pageId,
        systemId: this.tabPosition,
      });
      this.tableList = returnObj;
    },
    // 分页
    handleCurrentChange(row) {
      // this.queryParams.pageSize = row.pageSize;
      // this.queryParams.pageNum = row.pageNum;

      // this.query();
    },
    async confirm() {
      this.close();

      this.$emit("done");
    },
  },
};
</script>

<style lang="scss" scoped></style>
